import React from "react";
import {
  UploadOutlined,
  FormOutlined,
  ThunderboltOutlined,
  DownloadOutlined,
  MobileOutlined,
  BgColorsOutlined,
} from "@ant-design/icons";

const FeatureCard = ({ icon, title, description, iconBgColor, iconColor }) => (
  <div className="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 hover:border-primary-300 dark:hover:border-primary-700">
    <div
      className={`w-12 h-12 mb-4 rounded-lg ${iconBgColor} flex items-center justify-center`}
    >
      {React.cloneElement(icon, { className: `text-xl ${iconColor}` })}
    </div>
    <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
      {title}
    </h3>
    <p className="text-gray-600 dark:text-gray-400">{description}</p>
  </div>
);

const FeaturesSection = () => {
  const features = [
    {
      icon: <UploadOutlined />,
      title: "图像上传",
      description:
        "支持点击或拖放上传JPEG、PNG、WebP格式图片，最大10MB，推荐分辨率1024×1024像素",
      iconBgColor: "bg-primary-100 dark:bg-primary-900",
      iconColor: "text-primary-600 dark:text-primary-400",
    },
    {
      icon: <BgColorsOutlined />,
      title: "多样风格选择",
      description:
        "提供宫崎骏、乐高、皮克斯、新海诚、迪士尼等多种预设风格，满足不同艺术需求",
      iconBgColor: "bg-secondary-100 dark:bg-secondary-900",
      iconColor: "text-secondary-600 dark:text-secondary-400",
    },
    {
      icon: <FormOutlined />,
      title: "文字描述定制",
      description:
        '通过文字描述进一步定制图像效果，如"增加饱和度"、"添加雪景背景"等，实现个性化创作',
      iconBgColor: "bg-green-100 dark:bg-green-900",
      iconColor: "text-green-600 dark:text-green-400",
    },
    {
      icon: <ThunderboltOutlined />,
      title: "快速生成",
      description:
        "AI模型高效处理，10-30秒内完成风格转换，提供进度反馈，减少等待焦虑",
      iconBgColor: "bg-blue-100 dark:bg-blue-900",
      iconColor: "text-blue-600 dark:text-blue-400",
    },
    {
      icon: <DownloadOutlined />,
      title: "高质量输出",
      description: "基于先进AI模型生成高质量图像，一键下载保存，方便分享和使用",
      iconBgColor: "bg-purple-100 dark:bg-purple-900",
      iconColor: "text-purple-600 dark:text-purple-400",
    },
    {
      icon: <MobileOutlined />,
      title: "响应式设计",
      description:
        "完美适配各种设备，从桌面到移动端，随时随地体验图像风格转换的乐趣",
      iconBgColor: "bg-yellow-100 dark:bg-yellow-900",
      iconColor: "text-yellow-600 dark:text-yellow-400",
    },
  ];

  return (
    <section id="features" className="py-16 bg-white dark:bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
            产品核心功能
          </h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
            图灵画匠提供简单而强大的图像风格转换功能，让每个人都能轻松创作艺术级图像
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <FeatureCard key={index} {...feature} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;
